/**
 * @desc: 公用modal弹框
 * @title: {string} 弹框标题
 * @visible: {bool} 控制弹框
 * @onOk: {func} 确定事件
 * @onCancel: {func} 取消事件
 * @children: {jsx} 弹框展示的内容
 * @width: {string} 弹框宽度 默认500
 * @maxHeight: {string} 弹框内容最大高度 默认600
 * @footer: {array} 自定义页脚
 * @closable: {boolean} 是否现实右上角关闭按钮
 * @classname: {string} 自定义组件类名
 * @noPadding: {boolean} 弹窗body不设置padding
 * 
 */

import React, { useState, useRef, useEffect } from 'react';

import { Modal } from 'antd';
import Draggable from 'react-draggable';


export default ({ title, visible, maskClosable, defaultContainer, onOk, onCancel, children, width = '500px', maxHeight = '65vh', minHeight = '200px', overflowX = 'hidden', footer, okText, cancelText, closable = true, className, noPadding = false, zIndex = 900, ...ret }) => {

	const [index, setIndex] = useState();
	useEffect(() => {
		if(index || index == 0) {
			return;
		}
		const arr = document.getElementsByClassName('views-layout');
		for(let i in arr) {
			if(arr[i].style?.cssText.includes('display: block;')) {
				setIndex(i);
				break;
			}
		}
	}, [])

	const [disabled, setDisabled] = useState(true);
	const [bounds, setBounds] = useState({
		left: 0,
		top: 0,
		bottom: 0,
		right: 0,
	});
	const draggleRef = useRef(null);
	const onStart = (_event, uiData) => {
		const { clientWidth, clientHeight } = window.document.documentElement;
		const targetRect = draggleRef.current?.getBoundingClientRect();
		if (!targetRect) {
			return;
		}
		setBounds({
			left: -targetRect.left + uiData.x + 72,
			right: clientWidth - (targetRect.right - uiData.x),
			top: -targetRect.top + uiData.y + 64,
			bottom: clientHeight - (targetRect.bottom - uiData.y),
		});
	};

	const renderTitle = () => {
		return (
			<div
				style={{
					width: '100%',
					cursor: 'move',
					fontSize: '18px',
					color: '#333',
					padding: '12px 20px 20px',
				}}
				onMouseOver={() => {
					if (disabled) {
						setDisabled(false);
					}
				}}
				onMouseOut={() => {
					setDisabled(true);
				}}
				// fix eslintjsx-a11y/mouse-events-have-key-events
				// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
				onFocus={() => { }}
				onBlur={() => { }}
			// end
			>
				{title}
			</div>
		)
	}
	return (
		<Modal
			maskClosable={maskClosable || false}
			destroyOnClose={true}
			forceRender={true}
			centered
			title={renderTitle()}
			wrapClassName="old-system-modal-wrap"
			footer={footer}
			open={visible}
			className={className}
			onOk={onOk}
			onCancel={onCancel}
			width={width}
			closable={closable}
			zIndex={zIndex}
			okText={okText || '确定'}
			cancelText={cancelText || '取消'}
			getContainer={() => defaultContainer ? document.body : (document.getElementsByClassName('views-layout')[index]  || false)}
			modalRender={(modal) => (
				<Draggable
					disabled={disabled}
					bounds={bounds}
					nodeRef={draggleRef}
					onStart={(event, uiData) => onStart(event, uiData)}
				>
					<div ref={draggleRef}>{modal}</div>
				</Draggable>
			)}
			{...ret}
		>
			<div style={{ maxHeight, minHeight, overflowY: 'auto', overflowX, padding: noPadding ? 0 : '2px 24px 16px' }}>
				{children}
			</div>
		</Modal>
	)
}